<template>
  <div class="bg-grey">
    <!-- 头部, 搜索使用占位符 -->
    <header class="flex j-between a-center p-10 sticky top-0 z-index-10 bg-white">
      <router-link tag="div" to="/city" class="text-content flex a-center p-l-5">
        <span class="p-h-3 fs-rem-13px">{{root.area ? root.area : '定位中'}}</span>
        <van-icon class="fs-rem-13px" name="arrow-down" />
      </router-link>
      <router-link
        tag="div"
        :to="{path: '/search', query: {type: 'merchant'}}"
        class="w-p-80 p-l-5"
      >
        <VSearch content="搜索商家" />
      </router-link>
    </header>
    <!-- 懒加载轮播图 -->
    <van-swipe :autoplay="3000" indicator-color="#fd4f51">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image" class="w-full" />
      </van-swipe-item>
    </van-swipe>
    <!-- 菜单 -->
    <div class="menu p-t-20 p-b-10 relative top--15 z-index-3 bg-white">
      <div v-if="!types" class="p-v-60 text-center">
        <van-loading color="#1989fa" />
      </div>
      <van-grid v-else :border="false" :column-num="5">
        <van-grid-item v-for="item in types" :key="item.id" class="p-0">
          <router-link
            tag="div"
            :to="{path: '/search/goods', query: {typeName: item.name, type: item.type }}"
            class="flex-column a-center"
          >
            <img class="w-10vw fs-rem-12px" :src="item.pic" :alt="item.name" />
            <p class="fs-rem-12px text-content m-t-5">{{item.name}}</p>
          </router-link>
        </van-grid-item>
        <van-grid-item class="p-0">
          <div class="flex-column a-center" @click="handleToggleShowAllType()">
            <van-icon class="fs-rem-35px text-grey" :name="showAllType ? 'arrow-up' : 'more-o'" />
            <p class="fs-rem-12px text-content m-t-5">{{showAllType ? '收起' : '更多'}}</p>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 公告 -->
    <van-skeleton title title-width="100%" :loading="!notice" class="p-h-20 p-10 m-b-10 bg-white">
      <div class="flex fs-14 p-10 p-h-20 m-t--10 m-b-5 bg-white overflow-omit">
        <span class="text-red">
          <svg-icon class="m-r-5" name="gonggao" />公告:
        </span>
        <div class="flex-1 h-20 o-hidden">
          <van-swipe
            :touchable="false"
            :show-indicators="false"
            :autoplay="3000"
            :vertical="true"
            :height="20"
          >
            <van-swipe-item v-for="item in notice" :key="item.id">
              <router-link
                tag="p"
                :to="`/notice/detail/${item.id}`"
                class="text-content fs-13 m-l-5 overflow-omit"
              >{{item.title}}</router-link>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
    </van-skeleton>
    <!-- 专区 -->
    <div class="bg-white p-10 m-b-5">
      <div class="flex j-between m-b-10">
        <p class="fs-rem-14px text-content">品牌专区</p>
        <div class="flex a-center text-grey">
          <span class="fs-rem-12px">更多</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <van-skeleton
        :row="3"
        title-width="100%"
        :loading="!ready"
        class="p-h-20 p-10 m-t-10 bg-white"
      >
        <horizontal-list type="brand" :list="brand"></horizontal-list>
      </van-skeleton>
    </div>
    <div class="bg-white p-10 m-b-10">
      <div class="flex j-between m-b-10">
        <p class="fs-rem-14px text-content">折扣专区</p>
        <div class="flex a-center text-grey">
          <span class="fs-rem-12px">更多</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <van-skeleton
        :row="3"
        title-width="100%"
        :loading="!ready"
        class="p-h-20 p-10 m-t-10 bg-white"
      >
        <horizontal-list type="discount" :list="discount"></horizontal-list>
      </van-skeleton>
    </div>
    <!-- 附近商家 -->
    <div class="p-10 bg-linear-grey">
      <van-skeleton avatar :row="4" avatar-size="80" avatar-shape="square" :loading="!ready">
        <van-list
          v-model="listControl.loading"
          :finished="listControl.pages === 0 || listPage.current === listControl.pages"
          finished-text="没有更多了"
          @load="getMoreData()"
          :immediate-check="false"
        >
          <merchant-list :list="list"></merchant-list>
          <div v-if="!list.length" class="text-center m-t-10">
            <empty-data content="附近未找到商家"></empty-data>
          </div>
        </van-list>
      </van-skeleton>
    </div>
  </div>
</template>

<script>
import Banner1 from '@/assets/images/banner1.jpg'
import Banner2 from '@/assets/images/banner2.jpg'

import { mapState } from 'vuex'
import VSearch from '@/components/VSearch'
import MerchantList from '@/views/Index/components/MerchantList'
import HorizontalList from '@/views/Index/components/HorizontalList'
let originType
export default {
  data () {
    return {
      ready: false,
      showAllType: false,
      types: null,
      message: 'Index',
      images: [
        Banner1,
        Banner2
      ],
      list: [],
      listPage: {
        size: 10,
        current: 1
      },
      listControl: {
        pages: null,
        loading: false
      },
      notice: null,
      brand: [
        {
          id: '06B79AF1-A91A-490E-A44A-691A05C83C9F',
          bid: '4bf601ce-a384-43f8-9c7e-b77c5064b1ec',
          bname: '南极人家纺旗舰店',
          picture: 'https://gw.alicdn.com/bao/uploaded/i2/3001726480/O1CN01jzTljS1xjt2sOVr72_!!3001726480.jpg',
          istop: 1,
          ldtime: '2019-09-11 01:16:03',
          endtime: '2019-09-10 16:00:00',
          zt: 1,
          sh: 0
        },
        {
          id: '06B79AF1-A91A-490E-A44A-691A05C83C9F',
          bid: '4bf601ce-a384-43f8-9c7e-b77c5064b1ec',
          bname: '南极人家纺旗舰店',
          picture: 'https://gw.alicdn.com/bao/uploaded/i2/3001726480/O1CN01jzTljS1xjt2sOVr72_!!3001726480.jpg',
          istop: 1,
          ldtime: '2019-09-11 01:16:03',
          endtime: '2019-09-10 16:00:00',
          zt: 1,
          sh: 0
        },
        {
          id: '06B79AF1-A91A-490E-A44A-691A05C83C9F',
          bid: '4bf601ce-a384-43f8-9c7e-b77c5064b1ec',
          bname: '南极人家纺旗舰店',
          picture: 'https://gw.alicdn.com/bao/uploaded/i2/3001726480/O1CN01jzTljS1xjt2sOVr72_!!3001726480.jpg',
          istop: 1,
          ldtime: '2019-09-11 01:16:03',
          endtime: '2019-09-10 16:00:00',
          zt: 1,
          sh: 0
        },
        {
          id: '06B79AF1-A91A-490E-A44A-691A05C83C9F',
          bid: '4bf601ce-a384-43f8-9c7e-b77c5064b1ec',
          bname: '南极人家纺旗舰店',
          picture: 'https://gw.alicdn.com/bao/uploaded/i2/3001726480/O1CN01jzTljS1xjt2sOVr72_!!3001726480.jpg',
          istop: 1,
          ldtime: '2019-09-11 01:16:03',
          endtime: '2019-09-10 16:00:00',
          zt: 1,
          sh: 0
        },
        {
          id: '06B79AF1-A91A-490E-A44A-691A05C83C9F',
          bid: '4bf601ce-a384-43f8-9c7e-b77c5064b1ec',
          bname: '南极人家纺旗舰店',
          picture: 'https://gw.alicdn.com/bao/uploaded/i2/3001726480/O1CN01jzTljS1xjt2sOVr72_!!3001726480.jpg',
          istop: 1,
          ldtime: '2019-09-11 01:16:03',
          endtime: '2019-09-10 16:00:00',
          zt: 1,
          sh: 0
        },
        {
          id: '06B79AF1-A91A-490E-A44A-691A05C83C9F',
          bid: '4bf601ce-a384-43f8-9c7e-b77c5064b1ec',
          bname: '南极人家纺旗舰店',
          picture: 'https://gw.alicdn.com/bao/uploaded/i2/3001726480/O1CN01jzTljS1xjt2sOVr72_!!3001726480.jpg',
          istop: 1,
          ldtime: '2019-09-11 01:16:03',
          endtime: '2019-09-10 16:00:00',
          zt: 1,
          sh: 0
        },
        {
          id: '06B79AF1-A91A-490E-A44A-691A05C83C9F',
          bid: '4bf601ce-a384-43f8-9c7e-b77c5064b1ec',
          bname: '南极人家纺旗舰店',
          picture: 'https://gw.alicdn.com/bao/uploaded/i2/3001726480/O1CN01jzTljS1xjt2sOVr72_!!3001726480.jpg',
          istop: 1,
          ldtime: '2019-09-11 01:16:03',
          endtime: '2019-09-10 16:00:00',
          zt: 1,
          sh: 0
        },
        {
          id: '06B79AF1-A91A-490E-A44A-691A05C83C9F',
          bid: '4bf601ce-a384-43f8-9c7e-b77c5064b1ec',
          bname: '南极人家纺旗舰店',
          picture: 'https://gw.alicdn.com/bao/uploaded/i2/3001726480/O1CN01jzTljS1xjt2sOVr72_!!3001726480.jpg',
          istop: 1,
          ldtime: '2019-09-11 01:16:03',
          endtime: '2019-09-10 16:00:00',
          zt: 1,
          sh: 0
        },
        {
          id: '06B79AF1-A91A-490E-A44A-691A05C83C9F',
          bid: '4bf601ce-a384-43f8-9c7e-b77c5064b1ec',
          bname: '南极人家纺旗舰店',
          picture: 'https://gw.alicdn.com/bao/uploaded/i2/3001726480/O1CN01jzTljS1xjt2sOVr72_!!3001726480.jpg',
          istop: 1,
          ldtime: '2019-09-11 01:16:03',
          endtime: '2019-09-10 16:00:00',
          zt: 1,
          sh: 0
        },
        {
          id: '06B79AF1-A91A-490E-A44A-691A05C83C9F',
          bid: '4bf601ce-a384-43f8-9c7e-b77c5064b1ec',
          bname: '南极人家纺旗舰店',
          picture: 'https://gw.alicdn.com/bao/uploaded/i2/3001726480/O1CN01jzTljS1xjt2sOVr72_!!3001726480.jpg',
          istop: 1,
          ldtime: '2019-09-11 01:16:03',
          endtime: '2019-09-10 16:00:00',
          zt: 1,
          sh: 0
        }
      ],
      discount: [
        {
          id: '06B79AF1-A91A-490E-A44A-691A05C83C9F',
          gid: '4bf601ce-a384-43f8-9c7e-b77c5064b1ec',
          gname: '南极人家纺旗舰店',
          picture: 'https://gw.alicdn.com/bao/uploaded/i2/3001726480/O1CN01jzTljS1xjt2sOVr72_!!3001726480.jpg',
          istop: 1,
          ldtime: '2019-09-11 01:16:03',
          endtime: '2019-09-10 16:00:00',
          zt: 1,
          sh: 0
        }
      ]
    }
  },
  components: {
    VSearch,
    MerchantList,
    HorizontalList
  },
  mounted () {
    this.init()
  },
  methods: {
    async init () {
      // 获取公告, 分类, 附近商家
      await Promise.all([
        this.getNotice(),
        this.getLevel1Type()
        // this.getSpecialList('brand'),
        // this.getSpecialList('discount')
      ])
      if (this.root.area && this.root.point) await this.getList()
      this.ready = true
    },
    handleToggleShowAllType () {
      // 更多分类展示
      this.showAllType = !this.showAllType
      if (this.showAllType) {
        this.types = originType
      } else {
        this.types = this.types.slice(0, 9)
      }
    },
    getMoreData () {
      // 分页查询附近商家
      this.listPage.current++
      this.getList()
    },
    async getLevel1Type () {
      let { zxGdTypeList } = await this.$api.post('/gd/type/query', {
        parentId: '0'
      })
      originType = zxGdTypeList
      this.types = zxGdTypeList.slice(0, 9)
    },
    async getList () {
      this.listControl.loading = true
      let { zxOrgList, current, pages } = await this.$api.post('/org/queryByXY', {
        area: this.root.area,
        ...this.listPage,
        ...this.root.point
      })
      this.listPage.current = current
      this.listControl.pages = pages
      this.listControl.loading = false
      zxOrgList.forEach(d => {
        d.agencyService = d.agencyService.split(',')
        d.distance = d.distance.toFixed(2)
      })
      this.list = [...this.list, ...zxOrgList]
    },
    async getNotice () {
      let { oaNotifyList } = await this.$api.post('/notify/query', {})
      this.notice = oaNotifyList
    },
    async getSpecialList (type) {
      let query
      switch (type) {
        case 'brand': query = 'brand'; break
        case 'discount': query = 'lowPrice'; break
      }
      let { page: { records } } = await this.$api.post(`/${query}/user/query`, {
        size: 10,
        current: 1
      })
      this[query] = records
    }
  },
  computed: {
    ...mapState(['root'])
  }
}
</script>

<style lang="scss" scoped>
.menu {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.bg-linear-grey {
  background: linear-gradient(to bottom, #fff, #f9f9f9 40px);
}
.list {
  &:first-child {
    margin-top: 0;
  }
  &:last-child {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 320px) {
  .merchant-img {
    width: 60px;
    height: 60px;
  }
}
</style>
